<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Document</title>
    <link href="../boot/css/bootstrap.min.css" rel="stylesheet">
    <!--核心jquery js-->
    <script src="../boot/js/jquery-3.4.1.min.js"></script>
    <!--bootstrap 核心 js-->
    <script src="../boot/js/bootstrap.min.js"></script>


</head>
<body>


基本实例 <br>
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <ul class="list-group">
                <li class="list-group-item">班级管理</li>
                <li class="list-group-item">用户管理</li>
                <li class="list-group-item">系统管理</li>
            </ul>

        </div>
    </div>
</div>


<div class="container">
    <div class="row">
        <div class="col-sm-4">
            基本实例 组合徽章 <br>
            <ul class="list-group">
                <li class="list-group-item">班级管理 <span class="badge">23</span></li>

                <li class="list-group-item">用户管理 <span class="badge">23</span></li>
                <li class="list-group-item">系统管理 <span class="badge">23</span></li>
            </ul>

            链接列表组 <br>
            <div class="list-group">
                <a class="list-group-item active" href="">班级管理</a>
                <a class="list-group-item" href="">用户管理</a>
            </div>
            <div class="list-group">
                <button class="list-group-item active">active</button>
                <button class="list-group-item disabled">disabled</button>
            </div>
            情景列表组 <br>
            <ul class="list-group">
                <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
                <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
                <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
                <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
            </ul>
            情景超链接列表组 <br>
            <div class="list-group">
                <a class="list-group-item list-group-item-success" href="http://www.baidu.com">Dapibus ac facilisis
                    in</a>
                <a class="list-group-item list-group-item-info" href="#">Cras sit amet nibh libero</a>
                <a class="list-group-item list-group-item-warning" href="#">Porta ac consectetur ac</a>
                <a class="list-group-item list-group-item-danger" href="#">Vestibulum at eros</a>
            </div>


            定制列表组 <br>
            <ul class="list-group">
                <li class="list-group-item active">
                    <h3 class="list-group-item-heading">班级管理</h3>
                    <p class="list-group-item-text">这是一个非常好的班级,这个班级非常好</p>
                </li>
                <li class="list-group-item active">
                    <h3 class="list-group-item-heading">班级管理</h3>
                    <p class="list-group-item-text">这是一个非常好的班级,这个班级非常好</p>
                </li>
            </ul>

        </div>
    </div>
</div>


</body>
</html>